<template>
  <div :style="{height:nowheight , width:nowwidth}" style="margin: 0 auto;">
    <Echart
      v-if="chartstau"
      :options="options"
    />
    <!-- :height="nowheight"
      :width="nowwidth" -->
  </div>
</template>

<script>
import Echart from "../../baseMain/index.vue";
import * as echarts from "echarts";

export default {
  components: {
    Echart
  },
  props: {
    nowwidth: {
      type: String,
      default: () => "300px"
    },
    nowheight: {
      type: String,
      default: () => "200px"
    },
    cdata: {
      type: Object,
      default: () => ({})
    },
    fontcolor: {
      type: String,
      default: () => "#fff"
    },
    fontSize: {
      type: Number,
      default: () => 18
    }
  },
  data() {
    return {
      chartstau: true,
      options: {}
    };
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          //   title: {
          //     text: newData.title,
          //     textStyle: {
          //         color:'#fff',
          //         fontSize:'12',
          //     },
          //     left: 'center'
          //   },
          color: [
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "#00FFA8" },
              { offset: 1, color: "#008080" }
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "#67F0FE" },
              { offset: 1, color: "#1E62F6" }
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "#5AD8A6" },
              { offset: 1, color: "#5AD8A630" }
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "#F6BD16" },
              { offset: 1, color: "#F6BD1630" }
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "#ffdb5c" },
              { offset: 1, color: "#ffdb5c30" }
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "#ff9f7f" },
              { offset: 1, color: "#ff9f7f30" }
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "#32c5e9" },
              { offset: 1, color: "#32c5e930" }
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "#fb7293" },
              { offset: 1, color: "#fb729330" }
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "#e7bcf3" },
              { offset: 1, color: "#e7bcf330" }
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "#3498DB" },
              { offset: 1, color: "#3498DB30" }
            ]),
            new echarts.graphic.LinearGradient(1, 0, 0, 1, [
              { offset: 0, color: "#4A235A" },
              { offset: 1, color: "#4A235A30" }
            ])
          ],
          tooltip: {
            // trigger: "axis",
            // axisPointer: {
            //   type: 'shadow'
            // },
            show: true, // 是否显示
            trigger: 'axis', // 触发类型  'item'图形触发:散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none':什么都不触发。
            axisPointer: { // 坐标轴指示器配置项。
              type: 'line', // 'line' 直线指示器  'shadow' 阴影指示器  'none' 无指示器  'cross' 十字准星指示器。
              axis: 'auto', // 指示器的坐标轴。
              snap: true // 坐标轴指示器是否自动吸附到点上
            },
            // showContent: true, //是否显示提示框浮层，默认显示。
            // triggerOn: 'mouseover', // 触发时机  'mouseover'鼠标移动时触发。     'click'鼠标点击时触发。  'mousemove|click'同时鼠标移动和点击时触发。
            // enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
            renderMode: 'html', // 浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；
            confine: true,
            backgroundColor: 'rgba(50,50,50,0)', // 提示框浮层的背景颜色。
            // : '100%', // 提示框浮层的背景颜色。
            borderColor: '#333', // 提示框浮层的边框颜色。
            borderWidth: 0, // 提示框浮层的边框宽。
            padding: 5, // 提示框浮层内边距，
            textStyle: { // 提示框浮层的文本样式。
              color: '#fff',
              fontStyle: 'normal',
              fontWeight: 'normal',
              fontFamily: 'sans-serif',
              fontSize: 14
            },
            formatter: function (params) {
              var relVal = params[0].name;
              for (var i = 0, l = params.length; i < l; i++) {
                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '' + newData.unitName
              }
              return relVal;
            }
          },
          dataZoom: [{
            show: true,
            type: 'slider',
            realtime: true,
            start: 0,
            end: 100, // 初始展示40%
            throttle: 60,
            height: 1,
            fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)",
            borderHeight: 1,
            handleSize: 40, // 两边手柄尺寸
            filterMode: 'empty',
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top: '98%'

            // zoomLock:true, // 是否只平移不缩放
            // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
            // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
          },
          {
            type: "inside", // 支持内部鼠标滚动平移
            start: 0,
            end: 100,
            zoomOnMouseWheel: false, // 关闭滚轮缩放
            moveOnMouseWheel: false, // 开启滚轮平移
            moveOnMouseMove: false // 鼠标移动能触发数据窗口平移
          }
          ],
          toolbox: {
            show: true
          },
          grid: {
            left: "0",
            right: "20",
            bottom: "60",
            top: "10",
            containLabel: true
          },
          xAxis: {
            type: "category",
            // boundaryGap: false,
            boundaryGap: true,
            data: newData.xAxisdata,
            axisLabel: {
              interval: "auto",
              margin: 10,
              fontSize: this.fontSize,
              color: this.fontcolor
            }
          },
          yAxis: {
            type: "value",
            axisLabel: {
              fontSize: 10,
              color: this.fontcolor
            },
            minInterval: 1,
            min: 0
          },
          calculable: true,
          legend: {
            show: true,
            orient: "horizontal",
            icon: "circle",
            margin: 10,
            bottom: 10,
            x: "center",
            data: newData.xData,
            axisLabel: {
              color: "#fff"
            },
            textStyle: {
              color: "#fff"
            }
          },
          series: newData.seriesData
        };
      },
      immediate: true,
      deep: true
    },
    // 应为最内层的高度固定为百分之百，所以写这里
    nowheight: {
      handler(e) {
        this.nowheights = e
        this.resetsty()
      },
      deep: true
    }
  },
  methods: {
    // 重置样式
    resetsty() {
      // alert("jkjk")
      this.chartstau = false
      this.$nextTick(
        () => {
          this.chartstau = true
        }
      )
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
